<style lang="less">
.home {
  display: grid;
  grid-template-rows: 252px 442px 300px 300px 608px;
  row-gap: 12px;
  .home__row {
    display: flex;
    .home__row-item {
      box-sizing: border-box;
      padding: 20px;
      height: 100%;
      background: #fff;
      border-radius: 2px;
      .home__row-title {
        color: #262626;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 16px;
        &--more {
          color: #595959;
          font-size: 14px;
        }
        &--between {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .choose-time {
            color: #595959;
            font-size: 14px;
            .time {
              cursor: pointer;
              &.active {
                color: #386cff;
              }
              & + .time {
                margin-left: 16px;
              }
            }
          }
        }
      }
    }
    // 第一行
    &--one {
      .home__row-item {
        .home__row-content {
          height: 172px;
          display: grid;
          grid-template-rows: repeat(2, 80px);
          row-gap: 12px;
          column-gap: 13px;
          .content__item {
            background: #f4f5f7;
            border-radius: 2px;
            box-sizing: border-box;
            padding: 16px 16px 12px;
            .content__title {
              margin-bottom: 12px;
              line-height: 16px;
              color: #595959;
              font-size: 12px;
              &--between {
                display: flex;
                justify-content: space-between;
              }
            }
            .content__data {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .data__number {
                color: #262626;
                font-size: 20px;
                font-weight: 600;
                &--yellow {
                  color: #ffb53c;
                }
              }
              .data__tip {
                color: #808080;
                font-size: 12px;
                &--red {
                  color: #ff3c3c;
                }
              }
            }
          }
        }
        & + .home__row-item {
          margin-left: 12px;
        }
        &:nth-of-type(1) {
          flex: 1;
          min-width: 696px;
          .home__row-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .home__row-content {
            grid-template-columns: repeat(3, 1fr);
            min-width: 210px;
          }
        }
        &:nth-of-type(2) {
          width: 340px;
          .home__row-content {
            grid-template-columns: repeat(2, 1fr);
            min-width: 210px;
          }
        }
      }
    }
    // 第二行
    &--two {
      .home__row-item {
        .home__row-content {
          height: 362px;
          line-height: 0;
        }
        &:nth-of-type(1) {
          flex: 1;
          min-width: 696px;
          .home__row-content {
            .content__item {
              .progress__text-wraper {
                height: 38px;
                display: flex;
                justify-content: center;
                margin-bottom: 8px;

                .progress__text {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #f4f5f7;
                  width: 80px;
                  height: 30px;
                  font-size: 14px;
                  color: #595959;
                  position: relative;
                  &::before {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border: 40px solid transparent;
                    border-top: 8px solid#f4f5f7;
                    position: absolute;
                    bottom: -48px;
                  }
                }
              }
              .item__title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                color: #595959;
                font-size: 14px;
                line-height: 20px;
                &--tips {
                  color: #bfbfbf;
                }
                &--number {
                  font-weight: 600;
                }
              }
              .arco-progress-line {
                height: 20px !important;
                border-radius: 2px;
                .arco-progress-line-bar {
                  border-radius: 2px;
                }
              }
              & + .content__item {
                margin-top: 8px;
              }
            }
          }
        }
        &:nth-of-type(2) {
          width: 340px;
        }
        & + .home__row-item {
          margin-left: 12px;
        }
      }
    }
    // 第三行, 第四行
    &--three,
    &--four {
      background: #fff;
      box-sizing: border-box;
      .home__row-item {
        width: 100%;
        .home__row-content {
          height: calc(100% - 40px);
        }
      }
    }
    // 第五行
    &--five {
      .home__row-item {
        width: calc(50% - 6px);
        & + .home__row-item {
          margin-left: 12px;
        }
        .home__row-content {
          height: 528px;
        }
      }
    }
  }
  .home__table {
    .arco-table-th {
      height: 48px;
    }
    .arco-table-td {
      height: 48px;
    }
  }
}
</style>

<template>
  <div class="home">
    <div class="home__row home__row--one">
      <div class="home__row-item">
        <p class="home__row-title">
          <span>数据概览</span>
          <a class="home__row-title--more" href="#">更多数据 ></a>
        </p>
        <div class="home__row-content">
          <div
            class="content__item"
            v-for="it in dataReportData"
            :key="it.title"
          >
            <template v-if="it.unit">
              <p class="content__title content__title--between">
                <span>{{ it.title }}</span>
                <span>{{ it.unit }}</span>
              </p>
            </template>
            <template v-else>
              <p class="content__title">
                <span>{{ it.title }}</span>
                <template v-if="it.haveTooltip">
                  <a-tooltip :content="it.titileTip">
                    <icon-at />
                  </a-tooltip>
                </template>
              </p>
            </template>
            <template v-if="it.haveUnit">
              <p class="content__data">
                <span class="data__number">{{ it.data }}</span>
                <span class="data__tip data__tip--red"
                  >↑{{ it.percentage }}</span
                >
              </p>
            </template>
            <template v-else>
              <p class="content__data">
                <span class="data__number">{{ it.data }}</span>
                <span class="data__tip">{{
                  `${it.increaseTitle}: ${it.increaseData}`
                }}</span>
              </p>
            </template>
          </div>
        </div>
      </div>
      <div class="home__row-item">
        <p class="home__row-title">代办事项</p>
        <div class="home__row-content">
          <div
            class="content__item"
            v-for="it in agencyMatterData"
            :key="it.title"
          >
            <p class="content__title content__title--between">
              <span>{{ it.title }}</span>
            </p>
            <p class="content__data">
              <span
                class="data__number"
                :class="+it.data > 0 ? 'data__number--yellow' : ''"
                >{{ it.data }}</span
              >
              <span class="data__tip" @click="it.clickHandle"
                ><icon-right
              /></span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="home__row home__row--two">
      <div class="home__row-item">
        <p class="home__row-title">漏斗模型</p>
        <div class="home__row-content">
          <div
            class="content__item"
            v-for="(it, i) in funnelModelData"
            :key="it.title"
          >
            <div class="progress__text-wraper" v-if="i !== 0">
              <span class="progress__text"
                >{{ (it.progress * 100).toFixed(2) }}%</span
              >
            </div>
            <p class="item__title">
              <span class="item__text--left">
                <span>{{ it.title }}</span>
                <span class="item__title--tips">{{ it.subTitle }}</span>
              </span>
              <span class="item__text--right">
                <span class="item__title--number">{{ it.titleData }}</span
                >人
              </span>
            </p>
            <a-progress
              :percent="+it.progress"
              track-color="#F4F5F7"
              color="#386CFF"
              :show-text="false"
              :style="{ height: '20px' }"
            ></a-progress>
          </div>
        </div>
      </div>
      <div class="home__row-item">
        <p class="home__row-title">用户分群</p>
        <div class="home__row-content">
          <user-assort />
        </div>
      </div>
    </div>
    <div class="home__row home__row--three">
      <div class="home__row-item">
        <p class="home__row-title home__row-title--between">
          <span>注册人数</span>
          <span class="choose-time">
            <span
              class="time"
              :class="registerCountCurrTimeArea === i ? 'active' : ''"
              v-for="(it, i) in chooseTimeList"
              :key="it"
              @click="changeRegisterCountCurrTimeArea(i)"
              >{{ it }}</span
            >
          </span>
        </p>
        <div class="home__row-content">
          <!-- <echarts-line series-name="注册人数" /> -->
        </div>
      </div>
    </div>
    <div class="home__row home__row--four">
      <div class="home__row-item">
        <p class="home__row-title home__row-title--between">
          <span>新增会员人数</span>
          <span class="choose-time">
            <span
              class="time"
              :class="newAddMemberCurrTimeArea === i ? 'active' : ''"
              v-for="(it, i) in chooseTimeList"
              :key="it"
              @click="changeNewAddMemberCurrTimeArea(i)"
              >{{ it }}</span
            >
          </span>
        </p>
        <div class="home__row-content">
          <!-- <echarts-line series-name="新增会员人数" /> -->
        </div>
      </div>
    </div>
    <div class="home__row home__row--five">
      <div class="home__row-item">
        <p class="home__row-title home__row-title--between">
          <span>流量消耗TOP10</span>
          <a class="home__row-title--more" href="#">更多数据 ></a>
        </p>
        <div class="home__row-content">
          <a-table class="home__table" :columns="flowColumns" :data="flowData" :pagination="false" />
        </div>
      </div>
      <div class="home__row-item">
        <p class="home__row-title home__row-title--between">
          <span>付费用户TOP10</span>
          <a class="home__row-title--more" href="#">更多数据 ></a>
        </p>
        <div class="home__row-content">
          <a-table class="home__table" :columns="payUserColumns" :data="payUserData" :pagination="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { user } from "@/api";
import userAssort from "./components/userAssort.vue";
import echartsLine from "@/components/echartsLine.vue";

// 数据概览
const dataReportData = reactive([
  {
    title: "注册总人数（人）",
    titileTip: "哈哈哈哈哈",
    data: "0",
    increaseTitle: "昨日新增",
    increaseData: "2548",
    // 拥有文字气泡
    haveTooltip: true,
  },
  {
    title: "最近7日成单量（单）",
    unit: "环比",
    data: "4,342",
    percentage: "6.53%",
    // 拥有单位，如：环比
    haveUnit: true,
  },
  {
    title: "最近7日成交额（元）",
    unit: "环比",
    data: "352,345.00",
    percentage: "8.34%",
    haveUnit: true,
  },
  {
    title: "会员当前剩余人数（人）",
    data: "4,347",
    increaseTitle: "7日新增",
    increaseData: "342",
  },
  {
    title: "首次付费人数（人）",
    data: "1230",
    increaseTitle: "7日新增",
    increaseData: "24",
  },
  {
    title: "二次付费人数（人）",
    data: "3117",
    increaseTitle: "7日新增",
    increaseData: "51",
  },
]);
// 代办事项
const agencyMatterData = reactive([
  {
    title: "实名待审核（人）",
    data: "3",
    clickHandle() {
      console.log("实名待审核");
    },
  },
  {
    title: "提现待审核（人）",
    data: "0",
    clickHandle() {},
  },
  {
    title: "待开发票（张）",
    data: "0",
    clickHandle() {},
  },
  {
    title: "活动审核（条）",
    data: "0",
    clickHandle() {},
  },
]);
// 漏斗模型
const funnelModelData = reactive([
  {
    title: "获取（Acquisition）",
    subTitle: "登录过后台",
    titleData: 6345,
    progress: 1,
  },
  {
    title: "激活（Activation）",
    subTitle: "实名认证成功",
    titleData: 456,
    progress: 0.0719,
  },
  {
    title: "留存（Retention）",
    subTitle: "创建活动",
    titleData: 404,
    progress: 0.886,
  },
  {
    title: "营收（Revenue）",
    subTitle: "发生过付费行为",
    titleData: 23,
    progress: 0.0569,
  },
]);
const chooseTimeList = ["近30天", "近1年"];
// 注册人数时间范围
// 0: 近30天
// 1: 近1年
let registerCountCurrTimeArea: any = ref(0);
const changeRegisterCountCurrTimeArea = (target: number) => {
  registerCountCurrTimeArea.value = target;
};
// 新增会员人数时间范围
// 0: 近30天
// 1: 近1年
let newAddMemberCurrTimeArea: any = ref(0);
const changeNewAddMemberCurrTimeArea = (target: number) => {
  newAddMemberCurrTimeArea.value = target;
};

// 流量消耗TOP10
const flowColumns = [
  {
    title: "排行",
    dataIndex: "ranking",
  },
  {
    title: "总流量消耗",
    dataIndex: "allFlowConsume",
  },
  {
    title: "总成本",
    dataIndex: "allCost",
  },
  {
    title: "用户昵称",
    dataIndex: "usernickname",
  },
  {
    title: "归属人",
    dataIndex: "attributor",
  },
];
const flowData = reactive([
  {
    ranking: "1",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "2",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "3",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "4",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "5",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "6",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "7",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "8",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "9",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "10",
    allFlowConsume: "258.00TB",
    allCost: "￥23,016.00",
    usernickname: "张三",
    attributor: "李四",
  },
]);
// 付费用户TOP10
const payUserColumns = [
  {
    title: "排行",
    dataIndex: "ranking",
  },
  {
    title: "付费总金额",
    dataIndex: "payAllMoney",
  },
  {
    title: "付费次数",
    dataIndex: "payCount",
  },
  {
    title: "用户昵称",
    dataIndex: "usernickname",
  },
  {
    title: "归属人",
    dataIndex: "attributor",
  },
];
const payUserData = reactive([
  {
    ranking: "1",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "2",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "3",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "4",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "5",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "6",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "7",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "8",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "9",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
  {
    ranking: "10",
    payAllMoney: "￥23,016.00",
    payCount: "9999",
    usernickname: "张三",
    attributor: "李四",
  },
]);

onMounted(() => {
  getUserTotal();
//   testLogin();
});
// const testLogin =  async () => {
//   const {data} = await user.testLogin();
// }
const getUserTotal = async () => {
  const {ok, data } = await user.getUserTotal();
  if(!ok) return;
  // 注册总人数
  dataReportData[0].data = data.data
}

</script>
